<template>
  <div>
    <div ref="echart" style="width:350px;height:460px;"></div>
  </div>
</template>

<script>
import func from '@/assets/js/func.js'
export default {
  computed: {
    rdata () {
      if (!this.params.storageInfo) return []
      func.quickSort([...this.params.storageInfo], 'storageNum').map((item, index) => item.color = func.allColor(index))
      return this.params.storageInfo.map(item => { return { value: item.storageNum, name: item.marketShortName, itemStyle: { borderWidth: 5, borderColor: '#101327', color: item.color}}})
    },
    cdata () {
      if (!this.params.outStorageInfo) return []
      func.quickSort([...this.params.outStorageInfo], 'storageNum').map((item, index) => item.color = func.allColor(index))
      let arr = this.params.outStorageInfo.map(item => { return { value: item.storageNum, name: item.marketShortName, itemStyle: { borderWidth: 5, borderColor: '#101327', color: item.color}}})
      if (arr.length > 5) return [...arr.slice(0, 5), ...[{value: arr.map(item => item.value).slice(5, arr.length).reduce((sumSoFar, item) => sumSoFar + item), name: '其他', itemStyle: { borderWidth: 5, borderColor: '#101327', color: func.allColor(5)}}]]
      else return arr
    }
  },
  watch: {
    'params.storageInfo' () {
      this.$nextTick().then(() => {
        this.init()
      })
    }
  },
  methods: {
    init () {
      let echart = this.$echarts.init(this.$refs["echart"]);
      echart.setOption({
      backgroundColor: 'rgba(19,22,41,0.6)',
      title: [
        {
          text: `各市场入库情况`,
          left: 10,
          top: 15,
          textStyle: {
            color: '#32FAF8',
            fontSize: 14,
            fontWeight: 'lighter'
          }
        },
        {
          text: `各市场出库情况`,
          left: 10,          
          top: 240,
          textStyle: {
            color: '#32FAF8',
            fontSize: 14,
            fontWeight: 'lighter'
          }
        }
      ],
      tooltip: {
        trigger: `item`,
        formatter: `{a} <br/>{b} : {c} ({d}%)`
      },
      series: [
        {
            name:'入库量',
            type:'pie',
            radius: ['28%', '43%'],
            center: ['center', 135],
            avoidLabelOverlap: false,
            label: {
              emphasis: {
                show: true,
                textStyle: {
                    fontSize: '30'
                }
              },
              fontSize: 10
            },
            labelLine: {
                normal: {
                    show: true,
                }
            },
            data: this.rdata
        },
        {
            name:'出库量',
            type:'pie',
            radius: ['28%', '43%'],
            center: ['center', 360],
            avoidLabelOverlap: false,
            label: {
              emphasis: {
                show: true,
                textStyle: {
                    fontSize: '30'
                }
              },
              fontSize: 10
            },
            labelLine: {
                normal: {
                    show: true,
                }
            },
            data:this.cdata
        }
      ]
    });
    }
  },
  props: [
    'params'
  ]
};
</script>
<style scoped>
body { zoom: 0.6666;}
</style>

